<template>
  <div class="app">
    <div class="tabs">
      <template v-for="(item, index) in tabs" :key="item">
        <button :class="{ active: currentTab === item }" 
                @click="itemClick(index)">
          {{ Object.keys(item)[0] }}
        </button>
      </template>
    </div>
    <div class="view">
      <!-- 1.第一种做法: v-if进行判断逻辑, 决定要显示哪一个组件 -->
      <!-- <template v-if="currentIndex === 0">
        <home></home>
      </template>
      <template v-else-if="currentIndex === 1">
        <about></about>
      </template>
      <template v-else-if="currentIndex === 2">
        <category></category>
      </template> -->

      <!-- 2.第二种做法: 动态组件 component -->
      <!-- is中的组件需要来自两个地方: 1.全局注册的组件 2.局部注册的组件 -->
      <!-- <component :is="tabs[currentIndex]"></component> -->
      <component name="dynamics-component" 
                 :age="18"
                 :is="dynamicsCpns">
      </component>
    </div>
  </div>
</template>

<script setup>
  import Home from "./views/Home.vue";
  import About from "./views/About.vue";
  import Category from "./views/Category.vue";
  import { ref, computed } from "vue";

  const tabs = [{"home": Home}, {"about": About}, {"category": Category}];
  const currentTab = ref("home");
  const currentIndex = ref(0);

  const itemClick = (index) => {
    currentIndex.value = index;
  };

  const dynamicsCpns = computed(() => {
    return tabs[currentIndex.value][Object.keys(tabs[currentIndex.value])[0]]
  })

</script>

<style lang="scss" scoped>
  .tab-bar {
    display: flex;
    background-color: #f2f2f2;

    .tab-bar-item {
      flex: 1;
      text-align: center;
      line-height: 50px;
    }
  }

</style>